<template>
  <view>
    <!-- <u-sticky>
      <view class="u-flex u-row-between shaixuan">
        <view v-for="(item, index) in shaixuanList" :key="index" :class="{on : item.id === shaix_type && showShaix}" class="item u-flex u-col-center" @click="getShaix(item.id)">
          <text class="u-m-r-10">{{item.name}}</text>
          <u-icon name="arrow-down-fill" size="16" color="#3C3D3E"></u-icon>
        </view>
      </view>
    </u-sticky> -->
    <view class="list">
      <view class="item" v-for="(item, index) in 8" :key="index">
        <view class="imgW">
          <image src="../static/icon/avatar.png" mode="aspectFit" class="img"></image>
        </view>
        <view class="div">
          <view class="name">酒店名称</view>
          <view class="lab">精装修</view>
          <view class="price">700元/月</view>
        </view>
        <view class="btn btn1"></view>
      </view>
      
    </view>
    <u-popup v-model="showShaix" :top="0" mode="top" border-radius="0" class="pup">
      <view class="pup-list" v-if="shaixuanType == 1">
        <view v-for="item in hotelList" :key="item.id" class="item" :class="{on: hotel_id == item.id}" @click="getKeyId(item.id, 'hotel_id')">
          {{item.name}}
          <u-icon v-if="hotel_id == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
        </view>
      </view>
      <view class="pup-list" v-if="shaixuanType == 2">
        <view v-for="item in typeList" :key="item.id" class="item" :class="{on: room_type_id == item.id}" @click="getKeyId(item.id, 'room_type_id')">
          {{item.name}}
          <u-icon v-if="room_type_id == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
        </view>
      </view>
      <view class="pup-list" v-if="shaixuanType == 3">
        <view v-for="item in statusList" :key="item.id" class="item" :class="{on: status == item.id}" @click="getKeyId(item.id, 'status')">
        {{item.name}}
        <u-icon v-if="status == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<style lang="scss" scoped>
  page{background-color: #fff !important;}
  .shaixuan{
    padding: 0 30rpx;
    .item{padding:30rpx 20rpx;}
    .on{color: #2A70F9;}
  }
  .on /deep/.uicon-arrow-down-fill{transform: rotate(180deg);}
  .pup-list{
    background-color: #fff; padding-top: 110rpx;
    .item{padding: 0 50rpx; border-top: 1px solid #f5f5f5; display: flex; align-items: center; justify-content: space-between; height: 90rpx;}
    .item.on{color: #2A70F9;}
    .item:first-child{border-top: none;}
  }
  /deep/.u-sticky{top: 0 !important; z-index: 9999 !important;}
  /deep/.u-sticky-wrap{position: relative; z-index: 99999; box-shadow: 0 0 5px #ddd;}
  
  
  .list{
    background-color: #fff;
    .item{
      display: flex; align-items: center; justify-content: space-between; padding: 40rpx 0; border-bottom: 1px solid #ddd; position: relative; overflow: hidden;
      .imgW{width: 200rpx; height: 150rpx; border-radius: 8rpx; margin-right: 22rpx;}
      .img{width: 100%; height:100%; display: block;}
      .div{
        flex: 1; width: 100%;
        .name{font-size: 36rpx; font-weight: bold; margin-bottom: 10rpx;}
        .lab{font-size: 28rpx; color: #666; margin-bottom: 10rpx;}
        .price{color:#2A70F9;}
      }
      .btn{
        width: 200rpx; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30rpx; color: #fff; position: absolute; left: 100%; transition: all ease .3s;
      }
      &.on{
        .btn{left: calc(100% - 200rpx); z-index: 98;}
      }
      .btn1{background-color: #2A70F9;}
      .btn2{background-color: #f48621;}
    }
  }
</style>
<script>
	export default {
		data() {
			return {
        shaixuanList:[ {id:1, name:'酒店'}, {id:2, name:'房型'}, {id:3, name:'状态'}],
        shaix_type:'',
        showShaix:false,
        statusList:[{id:1, name:'已维修'}, {id:2, name:'未维修'}],
        typeList:[
          {id:1, name:'三室一厅'}, 
          {id:2, name:'二室一厅'}
        ],
        hotelList:[
          {id:1, name:'酒店1'}, 
          {id:2, name:'酒店2'}
        ],
        status:'', // 状态
        room_type_id:'', // 房型id
        hotel_id:'', // 酒店id
			}
		},
    onShow(){
      this.getList()
    },
		methods: {
      getShaix(e){
        this.shaixuanType = e;
        this.showShaix = true;
      },
      clickItem(e){
        console.log('ee', e)
      },
      getList(){
        this.$api.myRepairReportListApi({}).then(resu => {
          // this.hotelName = resu.data.hotel_name
          // app.globalData.locate.hotelName = resu.data.hotel_name
        })
      },
		},
    onReachBottom() {
      
    }
	}
</script>